/**
 *  Props 的类型校验
 *
 *  React 中的类型校验（没有 TS 的情况下）
 *    1. 需要额外安装一个包 prop-types。（该模块之前 react 核心中的，后续为了做 tree-shaking 将其单独做成了一个模块）
 *       import AAAA from 'prop-types'
 *    2. 给组件设置 propTypes 属性
 *        类组件：
 *            外部
 *                Hello.propTypes = {
 *                    propA: AAAA.string,
 *                    propB: AAAA.bool
 *                    propC: AAAA.bool.required
 *                }
 *            内部
 *                {
 *                    static propTypes = {
 *                        propA: AAAA.string,
 *                        propB: AAAA.bool
 *                        propC: AAAA.bool.required
 *                    }
 *                    render() {}
 *                }
 *        函数组件：
 *            外部
 *              World.propTypes = {
 *                    propA: AAAA.string,
 *                    propB: AAAA.bool
 *                    propC: AAAA.bool.isRequired
 *              }
 *
 *
 *  回顾Vue中的类型校验
 *    props: {
 *        propA: String,
 *        propB: Boolean
 *        propC: {
 *            type: Object,
 *            default() => {
 *                return {}
 *            },
 *            required: true
 *        }
 *    }
 *
 *    defineProps({
 *        propA: String
 *    })
 *
 *    withDefault<defineProps<{
 *        propA: string
 *    }>(), {
 *        propA: '张三'
 *    }>
 *
 */

import { Component } from "react";
import AAAA from "prop-types";

class Hello extends Component {
  static propTypes = {
    name: AAAA.string, // name 需要一个 string 类型
    age: AAAA.number, // age 需要一个 number 类型
    isShow: AAAA.bool, // isShow 需要一个 boolean 类型
    friends: AAAA.array, // friends 需要一个 数组 类型
    a: AAAA.oneOf(["One", "Two"]), // 必须是 One 或 Two 选一个
    b: AAAA.arrayOf(AAAA.number), // 是个数组，且数组中每一项需要为 number 类型
    c: AAAA.string.isRequired, // isRequired 表示必填
  };

  render() {
    return (
      <div>
        <h2>Hello</h2>
      </div>
    );
  }
}
// Hello.propTypes = {
//   name: AAAA.string, // name 需要一个 string 类型
//   age: AAAA.number, // age 需要一个 number 类型
//   isShow: AAAA.bool, // isShow 需要一个 boolean 类型
//   friends: AAAA.array, // friends 需要一个 数组 类型
//   a: AAAA.oneOf(["One", "Two"]), // 必须是 One 或 Two 选一个
//   b: AAAA.arrayOf(AAAA.number), // 是个数组，且数组中每一项需要为 number 类型
//   c: AAAA.string.isRequired, // isRequired 表示必填
// };

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <Hello
        c="1111"
        b={[1, 2, 3]}
        name={"张三"}
        age={18}
        isShow={true}
        friends={[]}
        a="Two"
      />
    </div>
  );
}
